// data display : progress, gauges and pie charts

body.caerp {
	.progress_indicator {
		padding: 16px 0;
		position: relative;
	}

	progress {
		background: $veryFadedGrey;
		border: 0 none;
		color: $darkGrey;
		display: block;
		height: 1rem;
		width: 100%;
	}

	progress:not([value]) {
		animation: en_move 2s linear infinite;
		background-image: linear-gradient(-45deg, $midFadedGrey 25%, $lightGrey 25%, $lightGrey 50%, $midFadedGrey 50%, $midFadedGrey 75%, $lightGrey 75%, $lightGrey 100%);
		background-size: 1.5rem 1.5rem;
		color: $midFadedGrey;
	}

	progress::-moz-progress-bar {
		background: $darkGrey;
	}

	progress.target {
		color: $transGrey;
	}

	progress.target::-moz-progress-bar {
		background: $transGrey;
	}

	progress.positive {
		color: var(--func-positive-color);
	}

	progress.positive::-moz-progress-bar {
		background: var(--func-positive-color);
	}

	progress.negative {
		color: var(--func-negative-color);
	}

	progress.negative::-moz-progress-bar {
		background: var(--func-negative-color);
	}

	progress.caution {
		color: var(--func-caution-color);
	}

	progress.caution::-moz-progress-bar {
		background: var(--func-caution-color);
	}

	progress:not([value])::-moz-progress-bar {
		background: transparent;
	}

	progress::-webkit-progress-bar {
		background: transparent;
	}

	progress::-webkit-progress-value {
		background: $darkGrey;
	}

	progress.target::-webkit-progress-value {
		background: $transGrey;
	}

	progress.error::-webkit-progress-value {
		background: transparent;
	}

	progress.positive::-webkit-progress-value {
		background: var(--func-positive-color);
	}

	progress.negative::-webkit-progress-value {
		background: var(--func-negative-color);
	}

	progress.caution::-webkit-progress-value {
		background: var(--func-caution-color);
	}

	progress:not([value])::-webkit-progress-value {
		background: transparent;
	}

	.value_info {
		display: block;
		line-height: 1rem;
		padding: 0 8px;
		white-space: nowrap;

		&.current {
			font-size: .875rem;
			font-weight: bold;
			left: 0;
			padding: 0 2px;
			position: absolute;
			text-align: right;
			top: 0;
		}

		&.target {
			font-size: .75rem;
			text-align: right;
		}

		svg {
			height: .5rem;
			position: absolute;
			top: 2rem;
			width: .5rem;
		}
	}

	progress:not(.positive)~.value_info {
		&.target {
			border-right: 1px solid $fadedGrey;
			width: 100%;

			svg {
				right: -4px;
			}
		}
	}

	progress.positive~.value_info {
		&.target {
			border-left: 1px solid $fadedGrey;
			position: absolute;
			right: 0;
			top: 2rem;
			text-align: left;

			svg {
				left: -5px;
				top: 0;
			}
		}
	}

	progress.positive[value="100"]~.value_info {
		&.target {
			border-left: 0 none;
			border-right: 1px solid $fadedGrey;
			position: static;
			text-align: right;
			width: 100%;

			svg {
				left: auto;
				right: -4px;
				top: auto;
			}
		}
	}

	.pie_chart {
		svg {
			background: $veryFadedGrey;
			border-radius: 50%;
			height: 6.25rem;
			transform: rotate(-90deg);
			width: 6.25rem;

			circle {
				fill: transparent;
				stroke-width: 32;
			}

			circle.positive1 {
				stroke: var(--func-positive-alternate-color);
			}

			circle.positive2 {
				stroke: var(--func-positive-color);
			}

			circle.caution {
				stroke: var(--func-caution-color);
			}

			circle.negative {
				stroke: var(--func-negative-color);
			}

			circle.neutral1 {
				stroke: $lightBlue;
			}

			circle.neutral2 {
				stroke: var(--func-neutral-color);
			}
		}
	}

	.icon.legend {
		border-radius: 50%;
		display: inline-block;
		height: 1em;
		width: 1em;

		&.positive1 {
			background: var(--func-positive-alternate-color);
		}

		&.positive2 {
			background: var(--func-positive-color);
		}

		&.caution {
			background: var(--func-caution-color);
		}

		&.negative {
			background: var(--func-negative-color);
		}

		&.neutral1 {
			background: $lightBlue;
		}

		&.neutral2 {
			background: var(--func-neutral-color);
		}
	}
}

@-webkit-keyframes en_move {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 1.5rem 1.5rem;
	}
}

@keyframes en_move {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 1.5rem 1.5rem;
	}
}